<template>
  <div class="model-selector">
    <label class="model-label">{{ label }}</label>
    <div class="select-wrapper">
      <select v-model="selectedModel" @change="handleChange" class="model-select">
        <option value="douban">豆包 (Qwen-Max)</option>
        <option value="deepseek">DeepSeek</option>
      </select>
      <font-awesome-icon icon="brain" class="select-icon" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'ModelSelector',
  props: {
    // 选择框的标签文本
    label: {
      type: String,
      default: '选择AI模型'
    },
    // 初始选中的值
    value: {
      type: String,
      default: 'douban'
    }
  },
  data() {
    return {
      // 当前选中的模型
      selectedModel: this.value
    };
  },
  watch: {
    // 监听props中value的变化，同步到data中的selectedModel
    value(newValue) {
      this.selectedModel = newValue;
    }
  },
  methods: {
    // 处理选择框值变化事件
    handleChange() {
      this.$emit('input', this.selectedModel);
      this.$emit('change', this.selectedModel);
    }
  }
};
</script>

<style scoped>
.model-selector {
  margin-bottom: 15px;
}

.model-label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  color: #4b5563;
}

.select-wrapper {
  position: relative;
}

.model-select {
  width: 100%;
  padding: 10px 12px;
  padding-right: 30px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background-color: white;
  font-size: 14px;
  color: #111827;
  appearance: none;
  cursor: pointer;
}

.model-select:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.select-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #6366f1;
  pointer-events: none;
}
</style>